<template>
  <div>
    <a-card :bordered="false" title="宠物类别">
      <div slot="extra">
        <a-input-search
          style="margin-left: 16px; width: 272px"
          placeholder="输入分类名称搜索"
          @search="handleSearch"
        />
      </div>
      <a-button
        type="primary "
        style="width: 10%; margin-bottom: 24px"
        icon="plus"
        @click="handleAdd"
        >添加</a-button
      >
      <Modal
        title="管理类别"
        maskClosable
        :confirm-loading="confirmLoading"
        :visible="openAddModal"
        :width="700"
        @ok="handleOk"
        @cancel="openAddModal = false"
      >
        <CategoryForm :form="categoryForm" @setCategoryForm="setCategoryForm" />
      </Modal>
      <a-list
        size="default"
        bordered
        :pagination="{
          showSizeChanger: true,
          showQuickJumper: true,
          pageSize: 10,
          total:
            this.mode === 'search' ? searchList.length : petCategoryList.length,
        }"
      >
        <a-list-item
          :key="i.id"
          v-for="i in this.mode === 'search' ? searchList : petCategoryList"
        >
          <a-list-item-meta :description="i.description">
            <a-avatar
              slot="avatar"
              size="large"
              shape="square"
              :src="i.avatar"
            />
            <a slot="title">{{ i.title }}</a>
          </a-list-item-meta>
          <div slot="actions">
            <a @click="handleEdit(i)">编辑</a>
          </div>
          <div slot="actions">
            <Popconfirm
              title="确定删除该项？"
              ok-text="确定"
              cancel-text="取消"
              @confirm="handleDel(i.id)"
            >
              <a class="text_red">删除</a>
            </Popconfirm>
          </div>
          <div v-if="0" slot="actions">
            <a-dropdown>
              <a-menu slot="overlay">
                <a-menu-item><a>编辑</a></a-menu-item>
                <a-menu-item><a>删除</a></a-menu-item>
              </a-menu>
              <a>更多<a-icon type="down" /></a>
            </a-dropdown>
          </div>
        </a-list-item>
      </a-list>
    </a-card>
  </div>
</template>

<script>
import { v4 as uuidv4 } from "uuid";
import { Modal, Popconfirm, message } from "ant-design-vue";
import CategoryForm from "./Modules/categoryForm.vue";
import { findIndex, filter } from "lodash";
import { sleep } from "@/utils/util";
export default {
  name: "StandardList",
  components: {
    Modal,
    CategoryForm,
    Popconfirm,
  },
  computed: {
    // petCategoryLists() {
    //   return this.$store.getters["locadata/get_petCategoryList"];
    // },
  },
  data: () => ({
    openAddModal: false,
    confirmLoading: false,
    petCategoryList: JSON.parse(localStorage.getItem("petCategoryList")) || [],
    categoryForm: {
      categoryName: "",
      categoryDec: "",
      categoryPic: "https://giffiles.alphacoders.com/221/221687.gif",
    },
    searchList: [],
    mode: "default",
  }),
  methods: {
    handleAdd() {
      this.categoryForm = {
        categoryPic: "https://giffiles.alphacoders.com/221/221687.gif",
      };
      this.openAddModal = true;
    },
    handleEdit({ title, description, avatar, id }) {
      this.openAddModal = true;
      this.categoryForm = {
        categoryName: title,
        categoryDec: description,
        categoryPic: avatar,
        id,
      };
    },
    handleDel(id) {
      const index = findIndex(this.petCategoryList, (l) => l.id === id);
      this.petCategoryList.splice(index, 1);
      this.updateLo();
    },
    async handleOk() {
      this.confirmLoading = true;
      try {
        this.verification();
        const { categoryName, categoryDec, categoryPic, id } =
          this.categoryForm;
        await sleep(800);
        const data = {
          id: uuidv4(),
          title: categoryName,
          description: categoryDec,
          avatar: categoryPic,
        };
        if (id) {
          const index = findIndex(this.petCategoryList, (l) => l.id === id);
          this.petCategoryList[index] = data;
        } else {
          this.petCategoryList.unshift(data);
        }
        this.updateLo();
        this.openAddModal = false;
      } finally {
        this.confirmLoading = false;
      }
    },
    setCategoryForm({ value, type }) {
      this.categoryForm[type] = value;
    },
    verification() {
      const { categoryName, categoryDec, categoryPic } = this.categoryForm;
      if (!categoryName || !categoryDec || !categoryPic) {
        message.error("请填写完整信息");
        throw new Error("请填写完整信息");
      }
    },
    handleSearch(searchText) {
      if (!searchText) {
        this.mode = "default";
        return;
      }
      this.mode = "search";
      this.searchList = filter(this.petCategoryList, (i) =>
        i.title.includes(searchText)
      );
    },
    updateLo() {
      localStorage.setItem(
        "petCategoryList",
        JSON.stringify(this.petCategoryList)
      );
    },
  },
};
</script>

<style lang="less" scoped>
.list-content-item {
  color: @text-color-second;
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  margin-left: 40px;
  span {
    line-height: 20px;
  }
  p {
    margin: 4px 0 0;
    line-height: 22px;
  }
}
.text_red {
  color: #ed6f6f;
}
</style>
